<template>
  <el-button :icon="Plus" type="primary" @click="isShowSpu" :disabled="!categoryStore.category3Id">添加SPU</el-button>
  <el-table border :data="spuList" style="margin: 20px 0" v-loading="loading">
    <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
    <el-table-column label="SPU名称" prop="spuName"></el-table-column>
    <el-table-column label="SPU描述" prop="description"></el-table-column>
    <el-table-column label="操作">
      <template v-slot="{ row, $index }">
        <el-button size="small" type="primary" title="添加SKU" :icon="Plus" @click="toAddSkuForm(row)"></el-button>
        <el-button size="small" type="primary" title="修改SPU" :icon="Edit" @click="toEditSpuInfo(row)"></el-button>
        <el-tooltip class="box-item" effect="dark" content="查看SKU列表" placement="top">
          <el-button size="small" type="info" :icon="InfoFilled" @click="checkSkuList(row.id)"></el-button>
        </el-tooltip>
        <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF" title="真的确定要删除此条数据么?" @confirm="deleteSpuInfo(row.id)">
          <template #reference>
            <el-button title="删除" type="danger" size="small" :icon="Delete" />
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:currentPage="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[3, 6, 9]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout=" prev, pager, next, jumper,->, sizes,total"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <!-- 表格 -->
  <el-dialog v-model="dialogSkuVisible" title="显示Sku列表">
    <el-table :data="skuList">
      <el-table-column property="skuName" label="名称" width="150" />
      <el-table-column property="price" label="价格" width="200" />
      <el-table-column property="weight" label="重量(千克)" />
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "SpuList",
}
</script>
<script lang="ts" setup>
import { ref, watch, onMounted } from "vue"
import { Plus, Edit, Delete, InfoFilled } from "@element-plus/icons-vue"
// 引入请求接口函数
import { reqDeleteSpuInfo, reqGetSpuListData } from "@/api/product/spu"
// 引入之前的三级联动框的数据
import { useCategoryListStore } from "@/stores/categoryList"
import { ElMessage } from "element-plus"
import { reqGetSkuListData } from "@/api/product/sku"
// 定义一个变量接受小菠萝中的categoryListStore中的数据,用来侦听store中的3id,一旦发生变化就重新获取数据

const emits = defineEmits(["sendShowSpu", "getSpuInfo", "getSkuInfo"])
const categoryStore = useCategoryListStore()
// 要渲染到页面的数据,用请求回来的数据存入这里,在渲染到页面中
const spuList = ref([])

const loading = ref(false)

const dialogSkuVisible = ref(false)
const skuList = ref([])

// 分页器相关数据
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const currentPage = ref<number>(1)
const pageSize = ref<number>(3)
const total = ref<number>(1)
// 注意定义接口的函数必须写在最上面,避免出现暂时性死区

// 定义一个获取spu列表的数据的函数
const getSpuListData = async () => {
  loading.value = true
  const result = await reqGetSpuListData(currentPage.value, pageSize.value, categoryStore.category3Id)
  // console.log(result)
  spuList.value = result.records
  total.value = result.total
  loading.value = false
}
// onMounted(() => {
//   getSpuListData()
// })
// 侦听Category3id,一旦有数据就发送请求获取数据渲染页面
watch(
  () => categoryStore.category3Id,
  category3Id => {
    if (!category3Id) return (spuList.value = []) // 赋值为空
    getSpuListData()
  },
  { immediate: true }
)

// 分页相关的两个事件
//  更改每页显示条数时触发的事件处理程序
const handleSizeChange = (val: number) => {
  // val就是每页显示的条数 其实也相当于是pageSize
  //   console.log(val)
  pageSize.value = val
  currentPage.value = 1
  getSpuListData()
}

//  根据当前页码进行切换时触发的函数
const handleCurrentChange = (val: number) => {
  //   console.log(`current page: ${val}`)
  currentPage.value = val
  getSpuListData()
}
// 删除spu
const deleteSpuInfo = async (id: number) => {
  await reqDeleteSpuInfo(id)
  ElMessage.success("删除spu成功...")

  // 重新刷新页面
  getSpuListData()
}
// 切换到spuForm组件的自定义函数
const isShowSpu = () => {
  // spuInfo.id = ""
  emits("sendShowSpu", "2")
  emits("getSpuInfo", {})
}
// 点击修改跳转spuForm组件
const toEditSpuInfo = row => {
  // console.log(row.id)
  emits("sendShowSpu", "2")
  // console.log("spuList", row)
  emits("getSpuInfo", {
    ...row,
    spuImageList: [], // 把缺少的两项，手动补上
    spuSaleAttrList: [],
  })
}

// 点击跳转到skuForm组件
const toAddSkuForm = row => {
  emits("sendShowSpu", "3") // 跳转到添加sku组件
  emits("getSkuInfo", row)
}

// 查看sku列表
const checkSkuList = async (id: number) => {
  const result = await reqGetSkuListData(id)
  // console.log('rr',result)
  dialogSkuVisible.value = true
  skuList.value = result
}
</script>

<style></style>
